<template>
	<view>
		<head-title :titleHead="titleHead" @principleFun = "principleFun"></head-title>
		<view class="leaveMgm"  v-for="(item,index) in attArr" :key="index">
			<checkbox-group class="checkbox"   @change = "changeFun($event,item)">
				<label style="display: flex;flex-direction: row;">
					<checkbox class="leaveCheck" :checked="item.checked" value="yes"></checkbox>
					<view style="width:130rpx;font-size: 38rpx;">{{item.studentName}}</view>
					<view class="attBtn"  @click="attBtnSkip(item,1)">
						<button  :class="[{'attBtnFontSlec': item.dvType==1},'attBtnFont']">着装</button>
					</view>			
					<view class="attBtn"  @click="attBtnSkip(item,2)">
						<button  :class="[{'attBtnFontSlec': item.dvType==2},'attBtnFont']">睡觉</button>
					</view>			
					<view class="attBtn"  @click="attBtnSkip(item,3)">
						<button  :class="[{'attBtnFontSlec': item.dvType==3},'attBtnFont']">玩游戏</button>
					</view>		
					<view class="attBtn"  @click="attBtnSkip(item,4)">
						<button  :class="[{'attBtnFontSlec': item.dvType==4},'attBtnFont']">外出</button>
					</view>		
					<view class="attBtn"  @click="attBtnSkip(item,5)">
						<button  :class="[{'attBtnFontSlec': item.dvType==5},'attBtnFont']">抽烟</button>
					</view>
				</label>
			</checkbox-group>
			<view v-if="attArr.length>index+1" class="attLine"></view>
		</view>
	</view>
</template>

<script>
	import headTitle from '@/pages/component/btnHeadeCom.vue'
	export default {
		name:'leveRegistration',
		data(){
			return{
				userName:'',
				titleHead:'违纪登记',
				classId:'',
				timeSlot:1,
				dvTypeArray:[],
				studentNoArray:[],
				typeList:[{
							type:"着装",
							isShow:false
						},{
							type:"睡觉",
							isShow:false},{
							type:"玩游戏",
							isShow:false},{
							type:"外出",
							isShow:false},{
							type:"抽烟",
							isShow:false}],
				attArr:[
					{
						student:'欧阳修',
						dormitoryNum:'202宿舍',
						time:'请假时间',											
						disArr:[{
							type:"着装",
							isShow:false
						},{
							type:"睡觉",
							isShow:false},{
							type:"玩游戏",
							isShow:false},{
							type:"外出",
							isShow:false},{
							type:"抽烟",
							isShow:false}],
					},
					{
						student:'范增',
						dormitoryNum:'202宿舍',
						time:'请假时间',
						disArr:[{
							type:"着装",
							isShow:false
						},{
							type:"睡觉",
							isShow:false},{
							type:"玩游戏",
							isShow:false},{
							type:"外出",
							isShow:false},{
							type:"抽烟",
							isShow:false}],
					},
					{
						student:'杜甫',
						dormitoryNum:'202宿舍',
						time:'请假时间',
						disArr:[{
							type:"着装",
							isShow:false
						},{
							type:"睡觉",
							isShow:false},{
							type:"玩游戏",
							isShow:false},{
							type:"外出",
							isShow:false},{
							type:"抽烟",
							isShow:false}],
					},
					{
						student:'李白',
						dormitoryNum:'202宿舍',
						time:'请假时间',
						disArr:[{
							type:"着装",
							isShow:false
						},{
							type:"睡觉",
							isShow:false},{
							type:"玩游戏",
							isShow:false},{
							type:"外出",
							isShow:false},{
							type:"抽烟",
							isShow:false}],
					}
				],
				timeSlot:1
			
			}
		},
		components:{
			headTitle
		},
		onShow() {
			var that = this
			uni.getStorage({
				key:"loginName",
				success:(res)=>{
					that.userName = res.data
					}
				})
		},
		mounted(){			
			this.getAppClaStuAttenceListByCId()
		},
		onLoad(options) {
			this.topName = options.className
			this.classId = options.classId
		},
		methods:{
			changeFun(e,item){
				item.checked = !item.checked
				if(item.checked){
					
				}else{
					item.dvType = 0
				}
				console.log(item.checked,item.dvType,"type")
			},
			principleFun(){
				var loginName= this.userName
				this.studentNoArray=[]
				this.dvTypeArray=[]
				for (let var1 in this.attArr) {	
					if(this.attArr[var1].dvType){
						this.dvTypeArray.push(this.attArr[var1].dvType)
						this.studentNoArray.push(this.attArr[var1].studentNo)	
					}								
				}
				if(this.dvTypeArray[0]!=null){
					uni.showLoading({
						title:"",
						mask:true
					})
					let timeNow = new Date();
					   // 获取当前小时
					let hours = timeNow.getHours();
					// 判断当前时间段
					    if (hours >= 0 && hours <= 12) {
					       this.timeSlot = 1
					    } else if (hours > 12 && hours <= 18) {
					       this.timeSlot = 2
					    } else if (hours > 18 && hours <= 24) {
							this.timeSlot = 3
						}
					this.$api.teacher.createClassDv(this.classId,loginName,this.$date,this.dvTypeArray,this.studentNoArray,this.timeSlot).then(res=>{
						uni.hideLoading()
						uni.showToast({
							title:"违纪提交成功"
						})
					}).catch(e=>{
						
					})
				}else {
					uni.showToast({
						title:'至少选择一条记录',
						icon:'none'
					})
				}
				
				
			},
			
			getAppClaStuAttenceListByCId(){
				let timeNow = new Date();
				   // 获取当前小时
				let hours = timeNow.getHours();
				// 判断当前时间段
				    if (hours >= 0 && hours <= 12) {
				       this.timeSlot = 1
				    } else if (hours > 12 && hours <= 18) {
				       this.timeSlot = 2
				    } else if (hours > 18 && hours <= 24) {
						this.timeSlot = 3
					}
				this.$api.teacher.getAppClaStuAttenceListByCId(this.classId,this.$date,this.timeSlot).then(res=>{
					this.attArr = res.data
					this.attArr.forEach((item)=>{
						item.checked = false
					})
				}).catch(e=>{
					
				})
			},
			leaveIndexSkip(item){
				uni.navigateTo({
					// url: '/pages/leave/leaveManagement',
					// success: res => {},
					// fail: () => {},
					// complete: () => {}
				});
			},
			attBtnSkip(item,status,arr){				
				if(status == 1){
					item.dvType =1
				}else if(status == 2){
					item.dvType = 2
				}else if(status == 3){
					item.dvType = 3
				}else if(status == 4){
					item.dvType = 4
				}else if(status == 5){
					item.dvType = 5
				}
				item.checked = !item.checked
				
			}
		}
	}
</script>

<style>
	.attBtnFontSlec{
		border:solid #007AFF 1rpx;border-radius: 10rpx;font-size: 30rpx;
		color:white !important;
		background-color: #007AFF;		
		padding:0 5rpx !important;
	}
	.attBtnFont{
		border:solid #808080 0rpx !important;font-size: 30rpx;
		border-radius: 10rpx;
		color: #808080;
		padding:0 16rpx !important
	}
	.attLine{
		width:720rpx;
		height:3rpx;
		background:rgba(239, 237, 236, 1.0);
		opacity:0.78;
		position: relative;
		bottom: -10rpx;
		left:-16rpx;
	}
	.attBtn{
		margin-right:4rpx;
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		align-items: center;
		text-align: center;
		margin-top:-20rpx;		
	}
	.leaveNav{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36rpx;
		color:blue;
		width:100%;
		padding:50rpx
	}
	.leaveBtn{
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width:190rpx;
		height:60rpx;
		color:white;
		font-size: 26rpx;
		font-weight: 0;
	}
	.leaveLine{
		width:200rpx;
		height:8rpx;
		background:rgba(239, 220, 11, 1.0);
		opacity:0.78;
		position: relative;
		bottom: 0rpx;
		left:-30rpx;
	}
	.leaveMgm{
		color:#808080;
		font-size: 36rpx;
		width:720rpx;
		margin-top:30rpx;
		margin-left: 16rpx;
	}
	.leaveCheck{
		margin-left:20rpx;
		margin-bottom: 30rpx;	
	}
	.checkout{
		display: flex;
		justify-content: space-around;
		align-content: space-between;
	}
	.leaveTabLine{
		width:3rpx;
		height:60rpx;
		background:#8F8F94;
		opacity:0.78;
		position: relative;
		top: 0rpx;
		left:150rpx;
	}
	.indexContent{
		height: unset !important;
	}
</style>
